<!-- 我的页面 -->
<template>
  <div class="user">
    <LoginView @cutReg="getRegData" v-if="msg == 0" />
    <EnrollView @getMsg="getMsgData" v-if="msg == 1" />
    <div class="user-box" v-if="msg == 200">
      <RollbackBarView :to="'/'" :title="'我的'" />
      <div class="user-info">
        <div class="user-img">
          <img src="@/assets/images/user-img.png" alt="" />
        </div>
        <div class="account">
          <p>{{ userName }}</p>
          <p>{{ userAcc }}</p>
        </div>
      </div>
      <div class="quit" @click="userQuit">退出当前账号</div>
    </div>
    <BtmNavView />
  </div>
</template>

<script>
import BtmNavView from "@/components/BtmNavView.vue";
import EnrollView from "@/components/EnrollView.vue";
import LoginView from "@/components/LoginView.vue";
import RollbackBarView from "@/components/RollbackBarView.vue";

export default {
  data() {
    return {
      msg: 0,
      userName: "",
      userAcc: "",
    };
  },
  provide() {
    return {
      getUser: this.getUser,
    };
  },
  methods: {
    getMsgData(data) {
      this.msg = data;
    },
    getRegData(data) {
      this.msg = data;
    },
    userQuit() {
      window.localStorage.removeItem("code");
      window.localStorage.removeItem("userInfo");
      this.$toast.success("退出成功");
      this.$router.replace({ name: "home" });
      this.getUser();
    },
    getUser() {
      let code = window.localStorage.getItem("code");
      this.msg = code == null ? 0 : code;
      let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
      if (userInfo) {
        this.userName = userInfo.usernm == null ? "" : userInfo.usernm;
        this.userAcc = userInfo.useracc == null ? "" : userInfo.useracc;
      }
    },
  },
  created() {
    this.getUser();
  },
  components: { BtmNavView, LoginView, EnrollView, RollbackBarView },
};
</script>

<style lang="scss" scoped>
.user {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  .user-info {
    width: 100vw;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 1.25rem;
    .user-img {
      width: 3.75rem;
      padding: 2px;
      border: 1px solid #eee;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 3.75rem;
        border-radius: 50%;
      }
    }
    .account {
      padding: 0.625rem;
      p {
        margin: 0.5rem 0;
      }
    }
  }
  .quit {
    width: 100vw;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    margin-top: 0.9375rem;
  }
}
</style>
